import React, { useEffect, useState, createContext } from 'react';
import { Table, Input, Pagination, Radio } from 'antd';
import { connect } from 'dva';
import { typeName, statusName } from '@/utils/constant';


const { Search } = Input;
const pageLimit = 5

const theProps = (state) => {
  return {
    member: state.member.member,
    total: state.taskmanage.total,
    taskList: state.taskmanage.taskList,
    mapsId: state.maps.mapsId
  }
}

export const MemberContext = createContext()

function Member(props) {

  const { total, dispatch, taskList } = props;
  useEffect(() => {
    dispatch({
      type: 'taskmanage/reqTask',
      payload: {
        current: 1,
        limit: pageLimit
      }
    })
    return () => {
    }
  }, [dispatch]);

  taskList.map((item, index) => {
    taskList[index] = { ...item, key: index }
  })

  const tableColumns = [
    {
      title: '样品编号',
      dataIndex: 'pictureId',
      key: 'id',
      width: 10,
    },
    {
      title: '任务类型',
      dataIndex: 'taskTypeId',
      key: 'taskTypeId',
      align: 'left',
      width: 20,
      render: (taskTypeId) => (typeName[taskTypeId])

    },
    {
      title: '任务状态',
      dataIndex: 'taskStatus',
      key: 'taskStatus',
      align: 'center',
      width: 200,
      render: (taskStatus, item) => (<a onClick={() => handleTaskStatus(taskStatus, item)}>{statusName[taskStatus]}</a>)
    },
    {
      title: '时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      align: 'center',
      width: 20,
      render: (gmtCreate) => (<div ><div>创建时间</div><span>{gmtCreate}</span></div>)
    },
  ]

  const [current, setCurrent] = useState(1)
  const [currentSort, setSort] = useState(0)
  const [visible, setVisible] = useState(false)
  const [visibleEdit, setVisibleEdit] = useState(false);
  const [editId, seteditId] = useState(0);
  const handleId = (item) => {
    dispatch({
      type: 'taskmanage/reqMapsInfoToMaps',
      payload: item.pictureId
    })
  }

  const handleTaskStatus = (type, item) => {
    if (item.taskTypeId == 1) {
      if (type === 1 || type === 2) {
        dispatch({
          type: 'taskmanage/reqMapsInfoToTask',
          payload: item.pictureId
        })
        dispatch({
          type: 'task/saveCurrent',
          payload: type
        })
      }
    }
    if (item.taskTypeId == 2) {
      if (type === 1 || type === 2) {
        dispatch({
          type: 'taskmanage/reqMineInfoToTask',
          payload: item.pictureId
        })
        dispatch({
          type: 'task/saveCurrent',
          payload: type
        })
      }
    }
  }

  const onChange = (page) => {
    setCurrent(page)
    if (currentSort == 0) {
      dispatch({
        type: 'taskmanage/reqTask',
        payload: {
          current: page,
          limit: pageLimit
        }
      })
    } else {
      dispatch({
        type: 'taskmanage/reqSelectTask',
        payload: {
          current: page,
          limit: pageLimit,
          statusId: currentSort
        }
      })
    }

  };
  const radioChange = (e) => {
    console.log(e?.target.value)
    setSort(e?.target.value)
    if (e?.target.value == 0) {
      dispatch({
        type: 'taskmanage/reqTask',
        payload: {
          current: current,
          limit: pageLimit
        }
      })
    } else {
      dispatch({
        type: 'taskmanage/reqSelectTask',
        payload: {
          current: current,
          limit: pageLimit,
          statusId: e?.target.value
        }
      })
    }
  }
  return (
    <div>
      <div>
        <Radio.Group defaultValue="0" buttonStyle="solid" onChange={radioChange}>
          <Radio.Button value="0">全部</Radio.Button>
          <Radio.Button value="2">已完成</Radio.Button>
          <Radio.Button value="1">运行中</Radio.Button>
          <Radio.Button value="3">运行失败</Radio.Button>
        </Radio.Group>
      </div>
      <Table
        scroll={{ x: '100%' }}
        style={{ height: '60vh', marginTop: '1em' }}
        // showHeader={false}
        pagination={false}
        columns={tableColumns}
        dataSource={taskList ? taskList : null}
        footer={() =>
        (
          <
            Pagination
            style={{ float: 'right', marginTop: '10vh' }}
            defaultPageSize={5}
            current={current}
            onChange={onChange}
            total={total}
          />
        )
        }
      />


    </div>
  )
}

export default connect(theProps, null)(Member)